<template>
    <div class="box">
        <header class="header">
            <van-nav-bar title="订单详情" left-arrow @click-left="$router.go(-1)" />
        </header>
        <!-- {{ myorderDetail }} -->
        <div class="content">
            <h3 style="text-align: center; line-height: 40px ;">{{ myorderDetail.status == '1' ? '待支付' : '已支付' }}</h3>
            <van-cell :title="myorderDetail.address.name + ' ' + myorderDetail.address.tel"
                :label="myorderDetail.address.address" />
            <van-swipe-cell v-for="item in myorderDetail.orderList" :key="item.id">
                <van-card :num="item.count" :price="item.price" :title="item.title" :thumb="item.image" />
            </van-swipe-cell>
            <div class="info">
                <van-row>
                    <van-col span="6">订单编号：</van-col>
                    <van-col span="18">{{ myorderDetail.id }}</van-col>
                </van-row>
                <van-row>
                    <van-col span="6">支付方式：</van-col>
                    <van-col span="18">{{ myorderDetail.status == '1' ? '待支付' : '在线支付' }}</van-col>
                </van-row>
                <van-row>
                    <van-col span="6">配送方式：</van-col>
                    <van-col span="18">快递运输</van-col>
                </van-row>
                <van-row>
                    <van-col span="6">订单总额：</van-col>
                    <van-col span="18">{{ myorderDetail.price }}</van-col>
                </van-row>
            </div>
        </div>
    </div>
    <footer class="footer">
        <div class="bottom">
            <van-button class="button" size="small" round>删除订单</van-button>
            <van-button class="button" size="small" round>看相似</van-button>
            <van-button class="button" size="small" round type="danger">再次购买</van-button>
        </div>
    </footer>
</template>

<script>
import { mapState } from 'pinia'
import { useCounterStore } from '@/store/index.js'
export default {
    data() {
        return {
            myorderDetail: {}
        }
    },
    computed: {
        ...mapState(useCounterStore, ['myorderList']),
    },
    created() {
        this.myorderDetail = this.myorderList.find(item => item.id == this.$route.params.id)
    }
}

</script>

<style lang="scss" scoped>
.info {
    background: #fff;
    color: #878888;
    margin-top: 10px;
    padding: 10px;
    font-size: 14px;
}

.bottom {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: flex-end;

    .button {
        margin: 10px;
    }
}
</style>
